<template xmlns:el-col="http://www.w3.org/1999/html">
    <div class="top">
        <el-row :gutter="80" class="row">
            <el-col :span="1">
                <el-avatar :size="70" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </el-col>
            <el-col :span="5" class="name">{{managerName}}</el-col>
            <el-col :span="11" class="title">无忧家政管理后台</el-col>
            <el-col :span="6" class="logout"><el-button type="info" @click="handleCommand">退出</el-button></el-col>
        </el-row>
<!--        <el-avatar style="margin-right: 10px" icon="el-icon-user-solid"></el-avatar>-->
<!--        <el-dropdown @command="handleCommand" style="margin-right: 5px">-->
<!--            <div class="el-dropdown-link" >-->
<!--                {{managerName}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--            </div>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--                <el-dropdown-item command="e" divided>退出</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--        </el-dropdown>-->
    </div>
</template>

<script>
    export default {
        name: "Top",
        data() {
            return{
                managerName: ''
            }
        },
        methods:{
            handleCommand(){
                this.$cookie.delete('managerName');
                this.$message({
                    type:"success",
                    message: '退出成功'
                })
                this.$router.push({
                    path: '/'
                });

            }
        },
        created() {
            this.managerName=this.$cookie.get('managerName');
        }
    }

</script>

<style scoped>
    .top{
        /*display: flex;!*弹性布局*!*/
        align-items: center;
        /*text-align:center;*/
        background-color: gray;
        height: 80px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .name{
        margin-top: 25px;
        font-size: larger;
        color: aqua;
    }
    .title{
        margin-top: 20px;
        font-size: 28px;
        font-family: 方正粗黑宋简体;
        text-align: center;
    }
    .logout{
        text-align: right;
        margin-top: 20px;
    }

</style>
